<template>
  <div>app组件</div>
  <input type="text" v-model.trim="userInfo.name">
  <MyTest v-if="flag"></MyTest>
  <button @click="flag = false">按钮</button>
</template>

<script>
import axios from 'axios'
import MyTest from './components/Test.vue'
export default {
  name: 'MyApp',
  components: {
    MyTest
  },
  data() {
    return {
      value: '',
      flag: true,
      userInfo: {
        name: '张三',
        age: 20
      }
    }
  },
  updated() {
    console.log('数据更新了')
  },
  watch: {
    // value(newVal, oldVal) {
    //   console.log(newVal, oldVal)
    //   if(newVal === '') {
    //     return
    //   }
    //   if(this.flag) {
    //     clearTimeout(this.flag)
    //   }
    //   this.flag = setTimeout(() => {
    //     axios({
    //     method: 'GET',
    //     url: 'https://www.escook.cn/api/finduser/' + newVal
    //     }).then(res => {
    //       console.log(newVal)
    //       console.log(res.data.message)
    //     })
    //   }, 1000)
    // }
    // 立即执行
    // value: {
    //   // 固定写法 handler
    //   handler(newVal, oldVal) {
    //     console.log(newVal, oldVal)
    //   },
    //   // 立即触发 value 监听器 immediate: true
    //   immediate: true
    // }

    // 监听单个数据的变化 username
    'userInfo.name': {
      handler(newVal) {
        console.log(newVal)
      },
    }
  }
}
</script>

<style>

</style>
